<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语口语练习小程序原型 v2.0</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 28px;
        }

        .prototype-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .screen {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
            height: 600px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .screen-content {
            flex: 1;
            padding: 20px 20px 80px 20px;
            overflow-y: auto;
        }

        .bottom-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #eee;
            display: flex;
            height: 60px;
        }

        .nav-tab {
            flex: 1;
            padding: 8px 4px;
            text-align: center;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #999;
        }

        .nav-tab.active {
            color: #0ea5e9;
        }

        .nav-tab i {
            font-size: 20px;
            margin-bottom: 4px;
        }

        .nav-tab span {
            font-size: 12px;
        }

        .paper-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid #e2e8f0;
        }

        .paper-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            border-color: #0ea5e9;
        }

        .paper-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }

        .grade-filter {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            background: white;
            padding: 12px 16px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border: 1px solid #e2e8f0;
        }

        .grade-filter-label {
            font-size: 15px;
            font-weight: 600;
            color: #334155;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .grade-selector-modern {
            position: relative;
            display: inline-block;
        }

        .grade-current {
            background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
            border: none;
            min-width: 100px;
            justify-content: center;
        }

        .grade-current:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
        }

        .grade-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            border: 1px solid #e2e8f0;
            margin-top: 8px;
            min-width: 120px;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }

        .grade-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .grade-option {
            padding: 10px 16px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            color: #475569;
        }

        .grade-option:first-child {
            border-radius: 12px 12px 0 0;
        }

        .grade-option:last-child {
            border-radius: 0 0 12px 12px;
        }

        .grade-option:only-child {
            border-radius: 12px;
        }

        .grade-option:hover {
            background: #f1f5f9;
            color: #0ea5e9;
        }

        .grade-option.active {
            background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
            color: white;
        }

        .grade-option.all {
            font-weight: 600;
            border-bottom: 1px solid #e2e8f0;
        }


        .paper-grade {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 600;
        }

        .paper-status {
            color: #4caf50;
            font-size: 12px;
            font-weight: bold;
        }

        .paper-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .paper-questions {
            display: flex;
            gap: 15px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .question-count {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #666;
            font-size: 13px;
        }

        .question-count i {
            color: #0ea5e9;
            font-size: 14px;
        }

        .paper-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #888;
            font-size: 13px;
        }

        .stat-item i {
            color: #667eea;
        }

        .paper-progress {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 10px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .progress-text {
            font-size: 12px;
            color: #888;
        }

        .progress-score {
            font-weight: bold;
            color: #10b981;
            font-size: 13px;
        }


        .question-overview {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
        }

        .overview-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .question-types {
            display: grid;
            gap: 12px;
        }

        .question-type {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .type-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .type-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
        }

        .type-icon.reading { background: linear-gradient(45deg, #ff6b6b, #ee5a24); }
        .type-icon.dialogue { background: linear-gradient(45deg, #00d2d3, #01a3a4); }
        .type-icon.expression { background: linear-gradient(45deg, #feca57, #ff9ff3); }

        .type-name {
            font-weight: bold;
            color: #333;
        }

        .type-count {
            color: #667eea;
            font-weight: bold;
        }

        .start-btn {
            width: 100%;
            background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }

        .start-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3);
        }

        .exercise-progress {
            background: #f8f9fa;
            padding: 15px 20px;
            margin: -20px -20px 20px -20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .progress-steps {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
        }

        .step {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }

        .step.active {
            background: #0ea5e9;
            color: white;
        }

        .step.completed {
            background: #10b981;
            color: white;
        }

        .step.pending {
            background: #e0e0e0;
            color: #999;
        }

        .step-line {
            width: 30px;
            height: 2px;
            background: #e0e0e0;
        }

        .step-line.completed {
            background: #10b981;
        }

        .progress-info {
            color: #666;
            font-size: 14px;
            text-align: right;
        }

        .back-header {
            display: flex;
            align-items: center;
            padding: 10px 0;
            margin-bottom: 20px;
        }

        .back-btn {
            color: #0ea5e9;
            margin-right: 15px;
            cursor: pointer;
            font-size: 18px;
        }

        .page-title {
            margin: 0;
            color: #333;
            font-size: 18px;
            flex: 1;
            text-align: center;
        }

        .exercise-content {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
        }

        .exercise-text {
            font-size: 16px;
            line-height: 1.8;
            color: #333;
            margin-bottom: 20px;
        }

        .audio-controls {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 20px 0;
        }

        .btn {
            background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            font-size: 14px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .btn-secondary {
            background: #f8f9fa;
            color: #333;
            border: 1px solid #dee2e6;
        }

        .btn-success {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
        }

        .recording-area {
            background: #fff;
            border: 2px dashed #dee2e6;
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            margin: 20px 0;
        }

        .record-btn {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 15px;
        }

        .record-btn:hover {
            transform: scale(1.1);
        }

        .record-btn.recording {
            background: linear-gradient(135deg, #ff4757, #c44569);
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .image-placeholder {
            width: 100%;
            height: 150px;
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1976d2;
            font-size: 16px;
            margin: 20px 0;
        }

        .dialogue-bubble {
            padding: 15px 20px;
            border-radius: 15px;
            margin: 15px 0;
            position: relative;
        }

        .dialogue-bubble.npc {
            background: #e8f5e8;
            border-left: 4px solid #4caf50;
        }

        .dialogue-bubble.user {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
        }

        .speaker {
            font-weight: bold;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .speaker.npc { color: #2e7d32; }
        .speaker.user { color: #ef6c00; }

        .hints-box {
            background: #f3e5f5;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
        }

        .hints-title {
            font-weight: bold;
            color: #7b1fa2;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hints-list {
            margin-left: 20px;
            color: #666;
        }

        .hints-list li {
            margin-bottom: 6px;
        }

        .score-display {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            margin: 20px 0;
        }

        .score-number {
            font-size: 48px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .score-text {
            color: #666;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .score-breakdown {
            margin: 25px 0;
        }

        .score-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .score-label {
            font-weight: bold;
            color: #333;
        }

        .score-value {
            font-weight: bold;
        }

        .score-value.excellent { color: #4caf50; }
        .score-value.good { color: #ff9800; }
        .score-value.average { color: #f44336; }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 5px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transition: width 0.3s;
        }

        .suggestions-box {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
        }

        .suggestions-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .suggestions-list {
            margin-left: 20px;
            color: #666;
            font-size: 14px;
        }

        .suggestions-list li {
            margin-bottom: 8px;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
            margin-top: 25px;
        }

        .action-buttons .btn {
            flex: 1;
            padding: 12px;
        }

        .completion-summary {
            background: #e8f5e8;
            border: 1px solid #c8e6c9;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            text-align: center;
        }

        .completion-icon {
            font-size: 48px;
            color: #4caf50;
            margin-bottom: 15px;
        }

        .completion-title {
            font-size: 20px;
            font-weight: bold;
            color: #2e7d32;
            margin-bottom: 10px;
        }

        .completion-text {
            color: #666;
            margin-bottom: 20px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin: 20px 0;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #666;
            font-size: 12px;
        }

        .disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        @media (max-width: 768px) {
            .prototype-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (min-width: 1200px) {
            .prototype-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-mobile-alt"></i> 英语口语练习小程序原型 v2.0</h1>
        
        <div class="prototype-grid">
            <!-- 1. 学习页面 - 试题列表 -->
            <div class="screen">
                <div class="screen-content">
                    <div class="grade-filter">
                        <div class="grade-filter-label">
                            <i class="fas fa-filter"></i>
                            年级筛选
                        </div>
                        <div class="grade-selector-modern">
                            <button class="grade-current" id="currentGrade">
                                <span>全部年级</span>
                                <i class="fas fa-chevron-down"></i>
                            </button>
                            <div class="grade-dropdown" id="gradeDropdown">
                                <button class="grade-option all active" data-grade="all">全部年级</button>
                                <button class="grade-option" data-grade="grade1">一年级</button>
                                <button class="grade-option" data-grade="grade2">二年级</button>
                                <button class="grade-option" data-grade="grade3">三年级</button>
                                <button class="grade-option" data-grade="grade4">四年级</button>
                                <button class="grade-option" data-grade="grade5">五年级</button>
                                <button class="grade-option" data-grade="grade6">六年级</button>
                            </div>
                        </div>
                    </div>


                    <div class="paper-card" data-grade="grade1">
                        <div class="paper-header">
                            <div class="paper-title">Unit 1 - ABC and Me</div>
                            <span class="paper-grade">一年级</span>
                        </div>
                        <div class="paper-questions">
                            <div class="question-count">
                                <i class="fas fa-headphones"></i>
                                <span>2个朗读训练</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-comments"></i>
                                <span>1个对话题</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-microphone"></i>
                                <span>1个表达题</span>
                            </div>
                        </div>
                        <div class="paper-progress">
                            <span class="progress-text">已完成</span>
                            <span class="progress-score">总分：95分</span>
                        </div>
                    </div>

                    <div class="paper-card" data-grade="grade2">
                        <div class="paper-header">
                            <div class="paper-title">Unit 2 - My Toys</div>
                            <span class="paper-grade">二年级</span>
                        </div>
                        <div class="paper-questions">
                            <div class="question-count">
                                <i class="fas fa-headphones"></i>
                                <span>3个朗读训练</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-comments"></i>
                                <span>2个对话题</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-microphone"></i>
                                <span>1个表达题</span>
                            </div>
                        </div>
                        <div class="paper-progress">
                            <span class="progress-text">进度：4/6 题</span>
                            <span class="progress-score">67%</span>
                        </div>
                    </div>

                    <div class="paper-card" data-grade="grade3">
                        <div class="paper-header">
                            <div class="paper-title">Unit 1 - Hello Everyone</div>
                            <span class="paper-grade">三年级</span>
                        </div>
                        <div class="paper-questions">
                            <div class="question-count">
                                <i class="fas fa-headphones"></i>
                                <span>3个朗读训练</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-comments"></i>
                                <span>2个对话题</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-microphone"></i>
                                <span>1个表达题</span>
                            </div>
                        </div>
                        <div class="paper-progress">
                            <span class="progress-text">进度：未开始</span>
                            <span class="progress-score">-</span>
                        </div>
                    </div>

                    <div class="paper-card" data-grade="grade3">
                        <div class="paper-header">
                            <div class="paper-title">Unit 2 - My Family</div>
                            <span class="paper-grade">三年级</span>
                        </div>
                        <div class="paper-questions">
                            <div class="question-count">
                                <i class="fas fa-headphones"></i>
                                <span>4个朗读训练</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-comments"></i>
                                <span>3个对话题</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-microphone"></i>
                                <span>2个表达题</span>
                            </div>
                        </div>
                        <div class="paper-progress">
                            <span class="progress-text">进度：6/9 题</span>
                            <span class="progress-score">67%</span>
                        </div>
                    </div>

                    <div class="paper-card" data-grade="grade4">
                        <div class="paper-header">
                            <div class="paper-title">Unit 1 - At School</div>
                            <span class="paper-grade">四年级</span>
                        </div>
                        <div class="paper-questions">
                            <div class="question-count">
                                <i class="fas fa-headphones"></i>
                                <span>4个朗读训练</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-comments"></i>
                                <span>3个对话题</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-microphone"></i>
                                <span>2个表达题</span>
                            </div>
                        </div>
                        <div class="paper-progress">
                            <span class="progress-text">已完成</span>
                            <span class="progress-score">总分：82分</span>
                        </div>
                    </div>

                    <div class="paper-card" data-grade="grade5">
                        <div class="paper-header">
                            <div class="paper-title">Unit 3 - Daily Activities</div>
                            <span class="paper-grade">五年级</span>
                        </div>
                        <div class="paper-questions">
                            <div class="question-count">
                                <i class="fas fa-headphones"></i>
                                <span>5个朗读训练</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-comments"></i>
                                <span>4个对话题</span>
                            </div>
                            <div class="question-count">
                                <i class="fas fa-microphone"></i>
                                <span>3个表达题</span>
                            </div>
                        </div>
                        <div class="paper-progress">
                            <span class="progress-text">进度：未开始</span>
                            <span class="progress-score">-</span>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <button class="nav-tab active">
                        <i class="fas fa-book"></i>
                        <span>学习</span>
                    </button>
                    <button class="nav-tab">
                        <i class="fas fa-clipboard-check"></i>
                        <span>测试</span>
                    </button>
                    <button class="nav-tab">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </button>
                </div>
            </div>

            <!-- 2. 试卷预览页 (练习/测试通用) -->
            <div class="screen">
                <div class="screen-content">
                    <div class="back-header">
                        <i class="fas fa-arrow-left back-btn"></i>
                        <h2 class="page-title">Unit 1 - Hello Everyone</h2>
                        <div style="width: 24px;"></div>
                    </div>

                    <!-- 模式标识 -->
                    <div style="text-align: center; margin-bottom: 20px;">
                        <span id="mode-indicator" style="background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%); color: white; padding: 8px 20px; border-radius: 20px; font-weight: bold; font-size: 14px;">
                            <i class="fas fa-book"></i> 练习模式
                        </span>
                    </div>

                    <div class="question-overview">
                        <div class="overview-title">
                            <i class="fas fa-list-check"></i>
                            内容预览
                        </div>
                        <div class="question-types">
                            <div class="question-type">
                                <div class="type-info">
                                    <div class="type-icon reading">
                                        <i class="fas fa-headphones"></i>
                                    </div>
                                    <div>
                                        <div class="type-name">短文朗读</div>
                                        <div style="font-size: 12px; color: #666;">完整朗读一篇短文，评测发音准确度</div>
                                    </div>
                                </div>
                                <div class="type-count">1题</div>
                            </div>
                            
                            <div class="question-type">
                                <div class="type-info">
                                    <div class="type-icon dialogue">
                                        <i class="fas fa-comments"></i>
                                    </div>
                                    <div>
                                        <div class="type-name">情景对话</div>
                                        <div style="font-size: 12px; color: #666;">根据图片回答5个问题</div>
                                    </div>
                                </div>
                                <div class="type-count">5题</div>
                            </div>
                            
                            <div class="question-type">
                                <div class="type-info">
                                    <div class="type-icon expression">
                                        <i class="fas fa-microphone"></i>
                                    </div>
                                    <div>
                                        <div class="type-name">情景表达</div>
                                        <div style="font-size: 12px; color: #666;">根据情景要点自由表达</div>
                                    </div>
                                </div>
                                <div class="type-count">1题</div>
                            </div>
                        </div>
                    </div>

                    <div id="mode-instructions" style="background: #f0f8ff; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #1976d2; margin-bottom: 8px;">
                            <i class="fas fa-info-circle"></i> <span id="instructions-title">练习说明</span>
                        </div>
                        <ul id="instructions-list" style="margin-left: 20px; color: #666; font-size: 14px;">
                            <li>按顺序完成三个阶段的题目</li>
                            <li>完成所有录音后统一提交评分</li>
                            <li>可以查看详细反馈和标准答案</li>
                            <li>支持重新练习和查看解析</li>
                        </ul>
                    </div>

                    <button class="start-btn" id="start-action-btn">
                        <i class="fas fa-play"></i> <span id="start-btn-text">开始练习</span>
                    </button>
                </div>
            </div>

            <!-- 3. 统一练习页面 (支持三个阶段) -->
            <div class="screen">
                <div class="screen-content">
                    <div class="back-header">
                        <i class="fas fa-arrow-left back-btn"></i>
                        <h2 class="page-title" id="current-stage-title">短文朗读</h2>
                        <div style="width: 24px;"></div>
                    </div>

                    <!-- 进度指示器 -->
                    <div class="exercise-progress">
                        <div class="progress-steps">
                            <div class="step active" id="step-1">1</div>
                            <div class="step-line" id="line-1"></div>
                            <div class="step pending" id="step-2">2</div>
                            <div class="step-line" id="line-2"></div>
                            <div class="step pending" id="step-3">3</div>
                        </div>
                        <div class="progress-info">
                            <div id="current-stage-info">1/3 短文朗读</div>
                        </div>
                    </div>

                    <!-- 阶段说明 -->
                    <div id="stage-instructions" style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin-bottom: 20px; border-left: 4px solid #0ea5e9;">
                        <p style="color: #666; font-size: 14px; line-height: 1.6; margin: 0;">
                            屏幕上有一篇短文。请你用1分钟的时间熟悉短文，并作朗读准备。在听到"开始录音"的信号后，请在90秒内朗读短文一遍。
                        </p>
                    </div>

                    <!-- 练习内容区域 (根据阶段动态显示) -->
                    <div id="exercise-content-area">
                        <!-- 短文朗读内容 -->
                        <div id="reading-content" class="exercise-content" style="background: white; border: 2px solid #e2e8f0; border-radius: 12px;">
                            <div class="exercise-text" style="font-size: 16px; line-height: 1.8; color: #333; margin-bottom: 0; text-align: left; padding: 20px;">
                                Good morning, everyone.<br>
                                My name is Alice Wang. I am a student in Class 3, Grade 7 at Sunny Middle School.<br>
                                I'm thirteen years old.<br>
                                My favorite subject is Math, and I am quite good at Science.<br>
                                I have a friend named Jack. Can you spell his name? Well, it's J‑A‑C‑K.<br>
                                He is fourteen years old and he likes drawing and music.<br>
                                We often study and relax together at school.<br>
                                What's your name? Let's learn and have fun together!
                            </div>
                        </div>
                    </div>

                    <!-- 录音区域 -->
                    <div style="text-align: center; margin: 25px 0;">
                        <button class="record-btn" id="main-record-btn" style="margin-bottom: 10px;">
                            <i class="fas fa-microphone"></i>
                        </button>
                        <div style="font-size: 16px; color: #333; font-weight: bold;" id="record-status">点击开始录音</div>
                        <div style="font-size: 14px; color: #666; margin-top: 5px;" id="record-timer">
                            录音时长：0:00
                        </div>
                        <div style="font-size: 12px; color: #10b981; margin-top: 8px; display: none;" id="record-completed">
                            <i class="fas fa-check-circle"></i> 录音完成
                        </div>
                    </div>

                    <!-- 操作按钮 (根据阶段动态显示) -->
                    <div class="action-buttons" id="stage-actions">
                        <button class="btn btn-secondary" id="retry-btn" style="display: none;">
                            <i class="fas fa-redo"></i> 重新录制
                        </button>
                        <button class="btn" id="next-stage-btn">
                            <i class="fas fa-arrow-right"></i> 下一阶段
                        </button>
                    </div>
                </div>
            </div>

            <!-- 4. 情景对话阶段 (整合到统一练习页面，这里仅作展示) -->
            <div class="screen">
                <div class="screen-content">
                    <div class="back-header">
                        <i class="fas fa-arrow-left back-btn"></i>
                        <h2 class="page-title">情景对话</h2>
                        <div style="width: 24px;"></div>
                    </div>

                    <!-- 进度指示器 -->
                    <div class="exercise-progress">
                        <div class="progress-steps">
                            <div class="step completed">1</div>
                            <div class="step-line completed"></div>
                            <div class="step active">2</div>
                            <div class="step-line"></div>
                            <div class="step pending">3</div>
                        </div>
                        <div class="progress-info">
                            <div>2/3 情景对话 (第1题/共5题)</div>
                        </div>
                    </div>

                    <div style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin-bottom: 20px; border-left: 4px solid #00d2d3;">
                        <p style="color: #666; font-size: 14px; line-height: 1.6; margin: 0;">
                            你将看到5幅图片，每幅图片有一个问题。你有15秒时间观察图片，然后在15秒内用英语回答问题。
                        </p>
                    </div>

                    <!-- 题目导航 -->
                    <div style="display: flex; justify-content: center; gap: 10px; margin-bottom: 20px;">
                        <div class="step completed" style="width: 30px; height: 30px; line-height: 30px;">1</div>
                        <div class="step active" style="width: 30px; height: 30px; line-height: 30px;">2</div>
                        <div class="step pending" style="width: 30px; height: 30px; line-height: 30px;">3</div>
                        <div class="step pending" style="width: 30px; height: 30px; line-height: 30px;">4</div>
                        <div class="step pending" style="width: 30px; height: 30px; line-height: 30px;">5</div>
                    </div>

                    <div style="text-align: center; margin-bottom: 20px;">
                        <img src="5004fe9e5cb574761dd3185b319f17d.png" alt="情景图片" style="max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                        <div style="font-weight: bold; color: #333; margin-top: 10px;">Question: What's the weather like today?</div>
                    </div>

                    <div style="text-align: center; margin: 25px 0;">
                        <button class="record-btn" style="margin-bottom: 10px;">
                            <i class="fas fa-microphone"></i>
                        </button>
                        <div style="font-size: 16px; color: #333; font-weight: bold;">点击开始录音</div>
                        <div style="font-size: 14px; color: #666; margin-top: 5px;">
                            录音时长：0:00
                        </div>
                    </div>

                    <div class="action-buttons">
                        <button class="btn btn-secondary">
                            <i class="fas fa-redo"></i> 重新录制
                        </button>
                        <button class="btn">
                            <i class="fas fa-arrow-right"></i> 下一题
                        </button>
                    </div>
                </div>
            </div>

            <!-- 5. 情景表达阶段 (整合到统一练习页面，这里仅作展示) -->
            <div class="screen">
                <div class="screen-content">
                    <div class="back-header">
                        <i class="fas fa-arrow-left back-btn"></i>
                        <h2 class="page-title">情景表达</h2>
                        <div style="width: 24px;"></div>
                    </div>

                    <!-- 进度指示器 -->
                    <div class="exercise-progress">
                        <div class="progress-steps">
                            <div class="step completed">1</div>
                            <div class="step-line completed"></div>
                            <div class="step completed">2</div>
                            <div class="step-line completed"></div>
                            <div class="step active">3</div>
                        </div>
                        <div class="progress-info">
                            <div>3/3 情景表达</div>
                        </div>
                    </div>

                    <div style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin-bottom: 20px; border-left: 4px solid #feca57;">
                        <p style="color: #666; font-size: 14px; line-height: 1.6; margin: 0;">
                            你有2分钟时间阅读情景要点，然后在2分钟内用5句以上英语句子进行表述。
                        </p>
                    </div>

                    <div class="hints-box">
                        <div class="hints-title">
                            <i class="fas fa-lightbulb"></i> 情景要点提示
                        </div>
                        <ul class="hints-list">
                            <li>这是Tommy叔叔的农场。那是一个漂亮的大农场。</li>
                            <li>你可以看到各种水果。他种了桃子、葡萄、西瓜和草莓。</li>
                            <li>他也养了不少动物。你瞧！他有马、山羊、鸡和鹅。</li>
                            <li>你看到那间蓝色的小屋了吗？那是Tommy叔叔的家。它很温馨。</li>
                            <li>你喜欢Tommy叔叔的农场吗？</li>
                        </ul>
                    </div>

                    <div style="text-align: center; margin: 25px 0;">
                        <button class="record-btn" style="margin-bottom: 10px;">
                            <i class="fas fa-microphone"></i>
                        </button>
                        <div style="font-size: 16px; color: #333; font-weight: bold;">点击开始录音</div>
                        <div style="font-size: 14px; color: #666; margin-top: 5px;">
                            录音时长：0:00
                        </div>
                    </div>

                    <!-- 最后阶段的按钮变为提交所有录音 -->
                    <div class="action-buttons">
                        <button class="btn btn-secondary">
                            <i class="fas fa-redo"></i> 重新录制
                        </button>
                        <button class="btn" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                            <i class="fas fa-upload"></i> 提交所有录音
                        </button>
                    </div>
                </div>
            </div>

            <!-- 6. 练习模式结果页面 -->
            <div class="screen">
                <div class="screen-content">
                    <div class="back-header">
                        <i class="fas fa-times back-btn"></i>
                        <h2 class="page-title">练习结果</h2>
                        <div style="width: 24px;"></div>
                    </div>

                    <!-- 模式标识 -->
                    <div style="text-align: center; margin-bottom: 20px;">
                        <span style="background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%); color: white; padding: 6px 16px; border-radius: 15px; font-size: 12px; font-weight: bold;">
                            <i class="fas fa-book"></i> 练习模式
                        </span>
                    </div>

                    <div class="score-display">
                        <div style="font-size: 18px; color: #333; margin-bottom: 10px;">综合评分</div>
                        <div class="score-number">88</div>
                        <div class="score-text">良好 - 继续努力！</div>
                        <div style="font-size: 12px; color: #666; margin-top: 8px;">用时：12分钟</div>
                    </div>

                    <!-- 分阶段评分 -->
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin: 20px 0;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 15px;">
                            <i class="fas fa-chart-bar"></i> 分阶段得分
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <span>短文朗读：</span>
                            <span style="font-weight: bold; color: #4caf50;">90分</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <span>情景对话：</span>
                            <span style="font-weight: bold; color: #4caf50;">85分</span>
                        </div>
                        <div style="display: flex; justify-content: space-between;">
                            <span>情景表达：</span>
                            <span style="font-weight: bold; color: #4caf50;">90分</span>
                        </div>
                    </div>

                    <div class="suggestions-box">
                        <div class="suggestions-title">
                            <i class="fas fa-lightbulb"></i> 详细反馈
                        </div>
                        <ul class="suggestions-list">
                            <li><strong>短文朗读:</strong> 发音清晰，语调自然，建议注意单词重音</li>
                            <li><strong>情景对话:</strong> 回答准确，表达流畅，可以增加更多细节</li>
                            <li><strong>情景表达:</strong> 逻辑清晰，内容完整，继续保持！</li>
                            <li><strong>总体建议:</strong> 整体表现良好，建议多练习口语流利度</li>
                        </ul>
                    </div>

                    <div class="action-buttons">
                        <button class="btn btn-secondary">
                            <i class="fas fa-redo"></i> 重新练习
                        </button>
                        <button class="btn">
                            <i class="fas fa-file-alt"></i> 查看详细解析
                        </button>
                        <button class="btn" style="background: #f8f9fa; color: #333; border: 1px solid #dee2e6;">
                            <i class="fas fa-home"></i> 返回主页
                        </button>
                    </div>
                </div>
            </div>

            <!-- 7. 测试模式结果页面 -->
            <div class="screen">
                <div class="screen-content">
                    <div class="back-header">
                        <i class="fas fa-times back-btn"></i>
                        <h2 class="page-title">测试结果</h2>
                        <div style="width: 24px;"></div>
                    </div>

                    <!-- 模式标识 -->
                    <div style="text-align: center; margin-bottom: 20px;">
                        <span style="background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: white; padding: 6px 16px; border-radius: 15px; font-size: 12px; font-weight: bold;">
                            <i class="fas fa-clipboard-check"></i> 测试模式
                        </span>
                    </div>

                    <div class="score-display">
                        <div style="font-size: 18px; color: #333; margin-bottom: 10px;">测试成绩</div>
                        <div class="score-number">85</div>
                        <div class="score-text">良好 - 表现不错！</div>
                        <div style="font-size: 12px; color: #666; margin-top: 8px;">用时：18分钟 / 限时：30分钟</div>
                    </div>

                    <!-- 简化的分数展示 -->
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin: 20px 0;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 15px;">
                            <i class="fas fa-chart-bar"></i> 各部分得分
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <span>短文朗读：</span>
                            <span style="font-weight: bold; color: #4caf50;">88分</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <span>情景对话：</span>
                            <span style="font-weight: bold; color: #4caf50;">83分</span>
                        </div>
                        <div style="display: flex; justify-content: space-between;">
                            <span>情景表达：</span>
                            <span style="font-weight: bold; color: #4caf50;">85分</span>
                        </div>
                    </div>

                    <!-- 测试统计信息 -->
                    <div style="background: #e8f5e8; border: 1px solid #c8e6c9; padding: 15px; border-radius: 12px; margin: 20px 0;">
                        <div style="font-weight: bold; color: #2e7d32; margin-bottom: 8px;">
                            <i class="fas fa-trophy"></i> 测试统计
                        </div>
                        <div style="font-size: 14px; color: #666;">
                            完成时间：2024-01-15 14:30:25<br>
                            班级排名：第8名 / 25人<br>
                            超过65%的同学
                        </div>
                    </div>

                    <!-- 测试模式不显示详细建议，只显示简要评价 -->
                    <div style="background: #fff3e0; padding: 15px; border-radius: 12px; margin: 20px 0;">
                        <div style="font-weight: bold; color: #ef6c00; margin-bottom: 8px;">
                            <i class="fas fa-star"></i> 总体评价
                        </div>
                        <div style="font-size: 14px; color: #666;">
                            整体表现良好，语音基础扎实，建议继续加强口语练习。
                        </div>
                    </div>

                    <div class="action-buttons">
                        <button class="btn btn-secondary">
                            <i class="fas fa-chart-line"></i> 查看班级排名
                        </button>
                        <button class="btn">
                            <i class="fas fa-home"></i> 返回主页
                        </button>
                    </div>
                </div>
            </div>

            <!-- 8. 提交评分中页面 -->
            <div class="screen">
                <div class="screen-content">
                    <div style="text-align: center; padding: 60px 20px;">
                        <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #10b981 0%, #059669 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; animation: pulse 2s infinite;">
                            <i class="fas fa-upload" style="color: white; font-size: 30px;"></i>
                        </div>
                        
                        <div style="font-size: 20px; font-weight: bold; color: #333; margin-bottom: 15px;">
                            正在评分中...
                        </div>
                        
                        <div style="color: #666; margin-bottom: 30px; line-height: 1.6;">
                            AI正在分析您的录音<br>
                            预计需要15-30秒
                        </div>
                        
                        <!-- 进度条 -->
                        <div style="background: #f0f0f0; height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 20px;">
                            <div style="background: linear-gradient(90deg, #10b981, #059669); height: 100%; width: 65%; transition: width 3s ease; border-radius: 3px;"></div>
                        </div>
                        
                        <div style="color: #888; font-size: 14px;">
                            正在处理短文朗读评分...
                        </div>
                    </div>
                </div>
            </div>

            <!-- 9. 测试中心页面 -->
            <div class="screen">
                <div class="screen-content">
                    <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 15px; margin-bottom: 20px;">
                        <div style="display: flex; align-items: center; margin-bottom: 8px;">
                            <i class="fas fa-info-circle" style="color: #856404; margin-right: 8px;"></i>
                            <strong style="color: #856404;">等待老师开启测试</strong>
                        </div>
                        <p style="color: #856404; font-size: 14px; margin: 0;">
                            老师暂未开启测试，请耐心等待或联系老师
                        </p>
                    </div>
                    
                    <div class="paper-card disabled">
                        <div class="paper-header">
                            <span class="paper-level">测试</span>
                            <span style="background: #ccc; color: white; padding: 4px 12px; border-radius: 15px; font-size: 12px;">未开启</span>
                        </div>
                        <div class="paper-title">英语口语测试 - 第一单元</div>
                        <div class="paper-desc">包含朗读、对话、表达三个部分的综合性测试</div>
                        <div class="paper-stats">
                            <div class="stat-item">
                                <i class="fas fa-clock"></i>
                                <span>30分钟</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-users"></i>
                                <span>25人参与</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-calendar"></i>
                                <span>待开启</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="paper-card">
                        <div class="paper-header">
                            <span class="paper-level">测试</span>
                            <span style="background: #4caf50; color: white; padding: 4px 12px; border-radius: 15px; font-size: 12px;">进行中</span>
                        </div>
                        <div class="paper-title">英语口语测试 - 基础评估</div>
                        <div class="paper-desc">基础英语口语能力评估测试，检验学习成果</div>
                        <div class="paper-stats">
                            <div class="stat-item">
                                <i class="fas fa-clock"></i>
                                <span>20分钟</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-users"></i>
                                <span>18/25人完成</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-hourglass-half"></i>
                                <span>剩余2小时</span>
                            </div>
                        </div>
                        <div style="margin-top: 15px;">
                            <button class="start-btn">
                                <i class="fas fa-play"></i> 开始测试
                            </button>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <button class="nav-tab">
                        <i class="fas fa-book"></i>
                        <span>学习</span>
                    </button>
                    <button class="nav-tab active">
                        <i class="fas fa-clipboard-check"></i>
                        <span>测试</span>
                    </button>
                    <button class="nav-tab">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </button>
                </div>
            </div>

            <!-- 9. 学生版我的页面 -->
            <div class="screen">
                <div class="screen-content">
                    <!-- 用户信息 -->
                    <div style="text-align: center; margin-bottom: 25px;">
                        <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 30px; margin: 0 auto 15px;">
                            <i class="fas fa-user"></i>
                        </div>
                        <div style="font-weight: bold; font-size: 18px; color: #333;">张小明</div>
                        <div style="color: #666; font-size: 14px; margin-bottom: 5px;">学号：2024001</div>
                        <div style="color: #0ea5e9; font-size: 14px; font-weight: 500;">三年级2班</div>
                    </div>
                    
                    <!-- 功能列表 -->
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                            <i class="fas fa-chart-line" style="color: #0ea5e9;"></i>
                            我的成绩
                        </div>
                        
                        <!-- 测试成绩入口 -->
                        <div class="paper-card" style="cursor: pointer;" onclick="alert('跳转到历史测试成绩页面');">
                            <div style="display: flex; align-items: center; gap: 15px;">
                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #0ea5e9, #06b6d4); display: flex; align-items: center; justify-content: center; color: white;">
                                    <i class="fas fa-clipboard-list"></i>
                                </div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 4px;">测试成绩</div>
                                    <div style="font-size: 12px; color: #666;">查看历史测试成绩和详细分析</div>
                                </div>
                                <div style="text-align: right;">
                                    <div style="font-size: 16px; font-weight: bold; color: #4caf50;">92分</div>
                                    <div style="font-size: 11px; color: #666;">最近测试</div>
                                </div>
                                <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                            </div>
                        </div>
                        
                        <!-- 无成绩提示 (可根据实际情况显示) -->
                        <div style="text-align: center; color: #999; font-size: 14px; margin-top: 20px; display: none;" id="no-scores-tip">
                            <i class="fas fa-info-circle"></i> 暂无测试成绩
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <button class="nav-tab">
                        <i class="fas fa-book"></i>
                        <span>学习</span>
                    </button>
                    <button class="nav-tab">
                        <i class="fas fa-clipboard-check"></i>
                        <span>测试</span>
                    </button>
                    <button class="nav-tab active">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </button>
                </div>
            </div>
            
            <!-- 10. 学生历史测试成绩页面 -->
            <div class="screen">
                <div class="screen-content">
                    <div class="back-header">
                        <i class="fas fa-arrow-left back-btn"></i>
                        <h2 class="page-title">测试成绩</h2>
                        <div style="width: 24px;"></div>
                    </div>
                    
                    <!-- 成绩总览 -->
                    <div style="background: #f8f9fa; padding: 15px; border-radius: 12px; margin-bottom: 20px;">
                        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center;">
                            <div>
                                <div style="font-size: 20px; font-weight: bold; color: #0ea5e9;">3</div>
                                <div style="font-size: 12px; color: #666;">测试次数</div>
                            </div>
                            <div>
                                <div style="font-size: 20px; font-weight: bold; color: #4caf50;">92</div>
                                <div style="font-size: 12px; color: #666;">最高分</div>
                            </div>
                            <div>
                                <div style="font-size: 20px; font-weight: bold; color: #ff9800;">78</div>
                                <div style="font-size: 12px; color: #666;">平均分</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 历史成绩列表 -->
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                            <i class="fas fa-history" style="color: #0ea5e9;"></i>
                            历史记录
                        </div>
                        
                        <!-- 成绩列表项 -->
                        <div class="paper-card" style="margin-bottom: 12px; cursor: pointer;" onclick="alert('查看测试详细成绩');">
                            <div style="display: flex; align-items: center; justify-content: space-between;">
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 4px;">英语口语测试 - 第一单元</div>
                                    <div style="font-size: 12px; color: #666; margin-bottom: 6px;">2024-01-15 14:30</div>
                                    <div style="display: flex; align-items: center; gap: 15px;">
                                        <span style="font-size: 14px; color: #666;">总分：</span>
                                        <span style="font-size: 18px; font-weight: bold; color: #4caf50;">92分</span>
                                        <span style="background: #e8f5e8; color: #2e7d32; padding: 2px 8px; border-radius: 12px; font-size: 11px;">优秀</span>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                            </div>
                        </div>
                        
                        <div class="paper-card" style="margin-bottom: 12px; cursor: pointer;" onclick="alert('查看测试详细成绩');">
                            <div style="display: flex; align-items: center; justify-content: space-between;">
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 4px;">英语口语测试 - 基础评估</div>
                                    <div style="font-size: 12px; color: #666; margin-bottom: 6px;">2024-01-10 10:15</div>
                                    <div style="display: flex; align-items: center; gap: 15px;">
                                        <span style="font-size: 14px; color: #666;">总分：</span>
                                        <span style="font-size: 18px; font-weight: bold; color: #ff9800;">78分</span>
                                        <span style="background: #fff3e0; color: #ef6c00; padding: 2px 8px; border-radius: 12px; font-size: 11px;">良好</span>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                            </div>
                        </div>
                        
                        <div class="paper-card" style="margin-bottom: 12px; cursor: pointer;" onclick="alert('查看测试详细成绩');">
                            <div style="display: flex; align-items: center; justify-content: space-between;">
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 4px;">英语口语测试 - 入门评估</div>
                                    <div style="font-size: 12px; color: #666; margin-bottom: 6px;">2024-01-05 16:45</div>
                                    <div style="display: flex; align-items: center; gap: 15px;">
                                        <span style="font-size: 14px; color: #666;">总分：</span>
                                        <span style="font-size: 18px; font-weight: bold; color: #f44336;">65分</span>
                                        <span style="background: #ffebee; color: #c62828; padding: 2px 8px; border-radius: 12px; font-size: 11px;">及格</span>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                            </div>
                        </div>
                        
                        <!-- 无成绩提示 -->
                        <div style="text-align: center; color: #999; font-size: 14px; margin-top: 30px; display: none;" id="no-history-tip">
                            <div style="width: 60px; height: 60px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                                <i class="fas fa-clipboard-list" style="font-size: 24px; color: #ccc;"></i>
                            </div>
                            <div style="font-weight: bold; margin-bottom: 8px;">暂无测试记录</div>
                            <div style="color: #ccc; font-size: 12px;">完成测试后成绩会显示在这里</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 11. 教师版我的页面 -->
            <div class="screen">
                <div class="screen-content">
                    <!-- 教师信息 -->
                    <div style="text-align: center; margin-bottom: 25px;">
                        <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 30px; margin: 0 auto 15px;">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div style="font-weight: bold; font-size: 18px; color: #333;">李老师</div>
                        <div style="color: #666; font-size: 14px; margin-bottom: 5px;">工号：T2024001</div>
                        <div style="color: #ff6b6b; font-size: 14px; font-weight: 500;">三年级英语教师</div>
                    </div>
                    
                    <!-- 功能列表 -->
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                            <i class="fas fa-cog" style="color: #ff6b6b;"></i>
                            管理功能
                        </div>
                        
                        <!-- 班级管理 -->
                        <div class="paper-card" style="margin-bottom: 12px; cursor: pointer; border-left: 4px solid #ff6b6b;" onclick="alert('跳转到班级管理页面');">
                            <div style="display: flex; align-items: center; gap: 15px;">
                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #ff6b6b, #ee5a24); display: flex; align-items: center; justify-content: center; color: white;">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 4px;">班级管理</div>
                                    <div style="font-size: 12px; color: #666;">管理班级学生，查看学生成绩</div>
                                </div>
                                <div style="text-align: right;">
                                    <div style="font-size: 16px; font-weight: bold; color: #ff6b6b;">3个班</div>
                                    <div style="font-size: 11px; color: #666;">75名学生</div>
                                </div>
                                <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                            </div>
                        </div>
                        
                        <!-- 测试成绩 -->
                        <div class="paper-card" style="margin-bottom: 12px; cursor: pointer;" onclick="alert('查看教师测试成绩');">
                            <div style="display: flex; align-items: center; gap: 15px;">
                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #0ea5e9, #06b6d4); display: flex; align-items: center; justify-content: center; color: white;">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 4px;">我的测试成绩</div>
                                    <div style="font-size: 12px; color: #666;">查看个人参与的测试成绩</div>
                                </div>
                                <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <button class="nav-tab">
                        <i class="fas fa-book"></i>
                        <span>学习</span>
                    </button>
                    <button class="nav-tab">
                        <i class="fas fa-clipboard-check"></i>
                        <span>测试</span>
                    </button>
                    <button class="nav-tab active">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </button>
                </div>
            </div>
            
            <!-- 12. 测试成绩详情页 -->
            <div class="screen">
                <div class="screen-content">
                    <div class="back-header">
                        <i class="fas fa-arrow-left back-btn"></i>
                        <h2 class="page-title">成绩详情</h2>
                        <div style="width: 24px;"></div>
                    </div>
                    
                    <!-- 测试基本信息 -->
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px;">英语口语测试 - 第一单元</div>
                        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; font-size: 14px;">
                            <div>
                                <span style="color: #666;">测试时间：</span>
                                <span style="color: #333;">2024-01-15 14:30</span>
                            </div>
                            <div>
                                <span style="color: #666;">用时：</span>
                                <span style="color: #333;">18分钟</span>
                            </div>
                            <div>
                                <span style="color: #666;">班级排名：</span>
                                <span style="color: #333;">3/25</span>
                            </div>
                            <div>
                                <span style="color: #666;">超过：</span>
                                <span style="color: #333;">88%同学</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 整体成绩 -->
                    <div class="score-display" style="margin-bottom: 25px;">
                        <div style="font-size: 18px; color: #333; margin-bottom: 10px;">整体成绩</div>
                        <div class="score-number">92</div>
                        <div class="score-text">优秀 - 表现出色！</div>
                    </div>
                    
                    <!-- 各部分得分 -->
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 15px;">
                            <i class="fas fa-chart-bar"></i> 各部分得分
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                <span style="color: #333;">短文朗读</span>
                                <span style="font-weight: bold; color: #4caf50;">95分</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 95%; background: linear-gradient(90deg, #4caf50, #45a049);"></div>
                            </div>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                <span style="color: #333;">情景对话</span>
                                <span style="font-weight: bold; color: #ff9800;">88分</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 88%; background: linear-gradient(90deg, #ff9800, #f57c00);"></div>
                            </div>
                        </div>
                        
                        <div>
                            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                <span style="color: #333;">情景表达</span>
                                <span style="font-weight: bold; color: #4caf50;">93分</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 93%; background: linear-gradient(90deg, #4caf50, #45a049);"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评价反馈 -->
                    <div style="background: #e8f5e8; border: 1px solid #c8e6c9; padding: 15px; border-radius: 12px;">
                        <div style="font-weight: bold; color: #2e7d32; margin-bottom: 8px;">
                            <i class="fas fa-star"></i> 老师评价
                        </div>
                        <div style="font-size: 14px; color: #333; line-height: 1.6;">
                            表现非常出色！发音清晰准确，语调自然流畅。情景对话部分可以再加强一些，整体水平已经达到优秀标准。继续保持！
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 13. 班级管理页面 -->
            <div class="screen">
                <div class="screen-content">
                    <div class="back-header">
                        <i class="fas fa-arrow-left back-btn"></i>
                        <h2 class="page-title">班级管理</h2>
                        <div style="width: 24px;"></div>
                    </div>
                    
                    <!-- 班级选择 -->
                    <div style="margin-bottom: 20px;">
                        <div class="grade-filter">
                            <div class="grade-filter-label">
                                <i class="fas fa-users"></i>
                                班级选择
                            </div>
                            <div class="grade-selector-modern">
                                <button class="grade-current" id="currentClass">
                                    <span>三年级2班</span>
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                                <div class="grade-dropdown" id="classDropdown">
                                    <button class="grade-option active" data-class="class1">三年级1班</button>
                                    <button class="grade-option" data-class="class2">三年级2班</button>
                                    <button class="grade-option" data-class="class3">三年级3班</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 班级统计 -->
                    <div style="background: #f8f9fa; padding: 15px; border-radius: 12px; margin-bottom: 20px;">
                        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center;">
                            <div>
                                <div style="font-size: 20px; font-weight: bold; color: #0ea5e9;">25</div>
                                <div style="font-size: 12px; color: #666;">学生总数</div>
                            </div>
                            <div>
                                <div style="font-size: 20px; font-weight: bold; color: #4caf50;">23</div>
                                <div style="font-size: 12px; color: #666;">已激活</div>
                            </div>
                            <div>
                                <div style="font-size: 20px; font-weight: bold; color: #ff9800;">85</div>
                                <div style="font-size: 12px; color: #666;">平均分</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 学生列表 -->
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between;">
                            <span>
                                <i class="fas fa-list" style="color: #0ea5e9;"></i>
                                学生列表
                            </span>
                            <span style="font-size: 12px; color: #666; font-weight: normal;">25人</span>
                        </div>
                        
                        <!-- 学生卡片 -->
                        <div class="paper-card" style="margin-bottom: 8px; cursor: pointer;" onclick="alert('查看张小明的成绩');">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px;">
                                    张
                                </div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 2px;">张小明</div>
                                    <div style="font-size: 11px; color: #666;">学号：2024001</div>
                                </div>
                                <div style="text-align: right;">
                                    <div style="font-size: 14px; font-weight: bold; color: #4caf50;">92分</div>
                                    <div style="font-size: 10px; color: #666;">最近测试</div>
                                </div>
                                <div style="width: 8px; height: 8px; border-radius: 50%; background: #4caf50; margin-left: 8px;"></div>
                                <i class="fas fa-chevron-right" style="color: #ccc; font-size: 12px;"></i>
                            </div>
                        </div>
                        
                        <div class="paper-card" style="margin-bottom: 8px; cursor: pointer;" onclick="alert('查看李小红的成绩');">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ff6b6b, #ee5a24); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px;">
                                    李
                                </div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 2px;">李小红</div>
                                    <div style="font-size: 11px; color: #666;">学号：2024002</div>
                                </div>
                                <div style="text-align: right;">
                                    <div style="font-size: 14px; font-weight: bold; color: #ff9800;">78分</div>
                                    <div style="font-size: 10px; color: #666;">最近测试</div>
                                </div>
                                <div style="width: 8px; height: 8px; border-radius: 50%; background: #ff9800; margin-left: 8px;"></div>
                                <i class="fas fa-chevron-right" style="color: #ccc; font-size: 12px;"></i>
                            </div>
                        </div>
                        
                        <div class="paper-card" style="margin-bottom: 8px; cursor: pointer;" onclick="alert('查看王小明的成绩');">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px;">
                                    王
                                </div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 2px;">王小明</div>
                                    <div style="font-size: 11px; color: #666;">学号：2024003</div>
                                </div>
                                <div style="text-align: right;">
                                    <div style="font-size: 14px; font-weight: bold; color: #f44336;">58分</div>
                                    <div style="font-size: 10px; color: #666;">最近测试</div>
                                </div>
                                <div style="width: 8px; height: 8px; border-radius: 50%; background: #f44336; margin-left: 8px;"></div>
                                <i class="fas fa-chevron-right" style="color: #ccc; font-size: 12px;"></i>
                            </div>
                        </div>
                        
                        <div class="paper-card" style="margin-bottom: 8px; opacity: 0.6;">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 36px; height: 36px; border-radius: 50%; background: #ccc; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px;">
                                    刘
                                </div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; color: #333; margin-bottom: 2px;">刘小明</div>
                                    <div style="font-size: 11px; color: #666;">学号：2024004</div>
                                </div>
                                <div style="text-align: right;">
                                    <div style="font-size: 12px; color: #999;">未激活</div>
                                </div>
                                <div style="width: 8px; height: 8px; border-radius: 50%; background: #ccc; margin-left: 8px;"></div>
                            </div>
                        </div>
                        
                        <!-- 更多学生提示 -->
                        <div style="text-align: center; color: #999; font-size: 12px; margin-top: 15px;">
                            ... 还有21名学生
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div style="position: fixed; bottom: 20px; right: 20px; z-index: 9999;">
        <div style="background: rgba(0,0,0,0.8); color: white; padding: 15px 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); font-size: 14px; line-height: 1.6; max-width: 300px;">
            <div style="font-weight: bold; margin-bottom: 8px;">
                <i class="fas fa-info-circle"></i> 个人信息页重构
            </div>
            <ul style="margin: 0; padding-left: 20px; color: #f0f0f0;">
                <li>显示真实姓名/班级信息</li>
                <li>测试成绩列表和详情页</li>
                <li>教师班级管理功能</li>
                <li>学生列表和成绩查看</li>
                <li>移除不必要的统计数据</li>
            </ul>
        </div>
    </div>
    
    <script>
        // 简单的交互效果
        document.querySelectorAll('.paper-card').forEach(card => {
            if (!card.classList.contains('disabled')) {
                card.addEventListener('click', function() {
                    this.style.backgroundColor = '#f8f9fa';
                    setTimeout(() => {
                        this.style.backgroundColor = 'white';
                    }, 200);
                });
            }
        });
        
        document.querySelectorAll('.record-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                if (this.classList.contains('recording')) {
                    this.classList.remove('recording');
                    this.innerHTML = '<i class="fas fa-microphone"></i>';
                } else {
                    this.classList.add('recording');
                    this.innerHTML = '<i class="fas fa-stop"></i>';
                }
            });
        });
        
        // 模拟进度条动画
        document.querySelectorAll('.progress-fill').forEach(fill => {
            const width = fill.style.width;
            fill.style.width = '0%';
            setTimeout(() => {
                fill.style.width = width;
            }, 500);
        });

        // 导航切换效果
        document.querySelectorAll('.nav-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除其他active状态
                this.parentNode.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
                // 添加active状态
                this.classList.add('active');
            });
        });

        // 年级选择器功能
        const currentGradeBtn = document.getElementById('currentGrade');
        const gradeDropdown = document.getElementById('gradeDropdown');
        
        // 点击当前年级按钮显示/隐藏下拉菜单
        currentGradeBtn?.addEventListener('click', function(e) {
            e.stopPropagation();
            gradeDropdown.classList.toggle('show');
        });
        
        // 点击文档其他地方隐藏下拉菜单
        document.addEventListener('click', function() {
            gradeDropdown?.classList.remove('show');
        });
        
        // 阻止下拉菜单内部点击冒泡
        gradeDropdown?.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        
        // 年级选项点击事件
        document.querySelectorAll('.grade-option').forEach(option => {
            option.addEventListener('click', function() {
                // 移除其他active状态
                document.querySelectorAll('.grade-option').forEach(opt => opt.classList.remove('active'));
                // 添加active状态
                this.classList.add('active');
                
                const selectedGrade = this.dataset.grade;
                const gradeText = this.textContent;
                
                // 更新当前选择显示
                const currentSpan = currentGradeBtn.querySelector('span');
                if (currentSpan) {
                    currentSpan.textContent = gradeText;
                }
                
                
                // 筛选卡片显示
                const paperCards = document.querySelectorAll('.paper-card');
                paperCards.forEach((card) => {
                    const cardGrade = card.dataset.grade;
                    if (selectedGrade === 'all' || cardGrade === selectedGrade) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
        
        // 模式切换功能模拟
        function switchMode(mode) {
            const modeIndicator = document.getElementById('mode-indicator');
            const instructionsTitle = document.getElementById('instructions-title');
            const instructionsList = document.getElementById('instructions-list');
            const startBtnText = document.getElementById('start-btn-text');
            
            if (mode === 'test') {
                // 测试模式
                modeIndicator.innerHTML = '<i class="fas fa-clipboard-check"></i> 测试模式';
                modeIndicator.style.background = 'linear-gradient(135deg, #ff6b6b, #ee5a24)';
                instructionsTitle.textContent = '测试说明';
                instructionsList.innerHTML = `
                    <li>必须按顺序完成三个阶段的题目</li>
                    <li>测试过程中不可中断或重做</li>
                    <li>完成所有录音后统一提交评分</li>
                    <li>只显示最终成绩，不提供详细反馈</li>
                `;
                startBtnText.textContent = '开始测试';
            } else {
                // 练习模式
                modeIndicator.innerHTML = '<i class="fas fa-book"></i> 练习模式';
                modeIndicator.style.background = 'linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%)';
                instructionsTitle.textContent = '练习说明';
                instructionsList.innerHTML = `
                    <li>按顺序完成三个阶段的题目</li>
                    <li>完成所有录音后统一提交评分</li>
                    <li>可以查看详细反馈和标准答案</li>
                    <li>支持重新练习和查看解析</li>
                `;
                startBtnText.textContent = '开始练习';
            }
        }
        
        // 默认显示练习模式
        switchMode('practice');
        
        // 可以通过点击模式指示器切换模式(仅作演示)
        document.getElementById('mode-indicator')?.addEventListener('click', function() {
            const currentMode = this.textContent.includes('练习') ? 'practice' : 'test';
            switchMode(currentMode === 'practice' ? 'test' : 'practice');
        });
    </script>
    
    <div style="position: fixed; bottom: 20px; right: 20px; z-index: 9999;">
        <div style="background: rgba(0,0,0,0.8); color: white; padding: 15px 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); font-size: 14px; line-height: 1.6; max-width: 300px;">
            <div style="font-weight: bold; margin-bottom: 8px;">
                <i class="fas fa-info-circle"></i> 原型更新说明
            </div>
            <ul style="margin: 0; padding-left: 20px; color: #f0f0f0;">
                <li>统一练习页面，支持3个阶段</li>
                <li>增加进度指示器</li>
                <li>练习/测试模式区分</li>
                <li>统一延迟反馈机制</li>
                <li>结果页面差异化设计</li>
            </ul>
        </div>
    </div>
</body>
</html>
